<template>
  <div>
    <el-table
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%">
      <el-table-column
        label="评价时间"
        prop="date">
      </el-table-column>
      <el-table-column
        label="姓名"
        prop="name">
      </el-table-column>
      <el-table-column
        label="职位"
        prop="position">
      </el-table-column>
      <el-table-column
        label="评价"
        show-overflow-tooltip="true"
        prop="evaluate">
      </el-table-column>
      <el-table-column
        align="right">
        <template #header>
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template #default="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)">发送审核请求</el-button>

            <el-button
            size="mini"
            type="warning"
            @click="open1">查看资料</el-button>

        </template>
      </el-table-column>
    </el-table>



    <div>
      <el-dialog
        title="通知"
        v-model="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>是否向该员工的 <strong>{{tableData1.position}}-{{tableData1.name}}</strong> 发送审核申请</span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="f1">发 送</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script lang="ts">
 import { h , defineComponent} from 'vue';
  import { ElMessage } from 'element-plus'
export default {
  name:'',
  data() {
    return {
      tableData: [{
        date: '2020-05-02',
        name: '张三',
        position: '人事部经理',
        evaluate: '该员工工作认真，服从分配，能够按时完成领班交待的工作任务。',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2020-01-04',
        name: '张三',
        position: '人事部经理',
        evaluate: '虽然工作性质繁琐、复杂，但她能平和的对待，处理事情有条不紊，工作总能自觉、认真、细致地完成，受到办公室成员一致好评。',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2020-05-04',
        name: '李四',
        position: '项目经理',
        evaluate: '该员工工作认真，脚踏实地，关心同事。',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2020-01-03',
        name: '李四',
        position: '项目经理',
        evaluate: '丰富且熟练，不论是本职工作还是辅助其他岗位的工作，从不斤斤计较。',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2019-05-04',
        name: '张三',
        position: '人事部经理',
        evaluate: '工作中她能够站在公司的角度，经常提出合理化建议，为部门的管理出谋策划，是领导的好助手。',
        address: '上海市普陀区金沙江路 1517 弄'
      }],
      search: '',
      tableData1:[],
      dialogVisible: false
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      this.tableData1 = (index, row);
      console.log(this.tableData1.name);
      this.dialogVisible = true;
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    f1(){
      const loading = this.$loading({
          lock: true,
          text: '正在发送请求,请稍等...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
        this.dialogVisible = false;
        ElMessage.success({
          message: '发送成功！！！',
          type: 'success'
        });
      }, 500);
    },
    open1() {
      this.$notify({
        title: '提示',
        dangerouslyUseHTMLString: true,
        message: h('i', { style: 'color: teal'}, '该用户未对你开放权限')
      });
    },
  },
}
</script>
<style lang="scss" scoped>
</style>
